<template>
  <el-dialog :title="title" :width="width" :visible.sync="isShowVisible" center :close-on-click-modal="false" :before-close="() => $emit('close')">
    <el-form label-width="125px" :model="materialData" ref="materialData" style="min-height:24vw" v-loading="isLoading">
      <el-tabs v-model="activeName">
        <el-tab-pane name="base"> <span slot="label"><i class="el-icon-date"></i> 基本资料</span>
          <el-card>
            <el-row>
              <el-col :span="8">
                <el-form-item label="测试编码:" prop="xNumber" id="xNumber">
                  
<el-input v-model="materialData.xNumber"></el-input>

                 
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="测试姓名:" prop="xName" id="xName">
                  <el-input v-model="materialData.xName" :disabled="isview"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="测试性别:" prop="xSex" id="xSex">
                  <el-input v-model="materialData.xSex" :disabled="isview"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="测试备注:" prop="xBeizhu" id="fmodel">
                  <el-input v-model="materialData.xBeizhu" :disabled="isview"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="测试日期:" prop="xDescription" id="xDescription" >
                <el-input v-if="!isLoading" v-model="materialData.xDate" disabled ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="根节点id:" prop="fGroupId" >
                  
                  <mdm-material v-if="!isLoading" ref="search_material" v-model="materialData.fGroupId" :loadShow="materialData.fGroupId" >
                    
                  </mdm-material>
                
                </el-form-item>
              </el-col>
            </el-row>
            <el-divider content-position="left">测试信息</el-divider>
        <el-row>
            <div style="margin-bottom:10px" v-if="!isview">
                <el-button type="primary"  plain size="small" @click="insertField(-1)" >新增</el-button>
                <el-button type="danger"   plain size="small" @click="$refs.xTable1.removeCheckboxRow()" >删除</el-button>
            </div>
        </el-row>
        
<el-row>
           <vxe-table 
     border
     show-overflow
     highlight-hover-row
     stripe
     resizable
    max-height="300"
    class="my_table_insert"
    :data="materialData.entry"
     >
<vxe-table-column type="checkbox" width="60"></vxe-table-column>
<vxe-table-column field="xId" title="测试id" ></vxe-table-column>
 <vxe-table-column field="xName" title="测试名称" ></vxe-table-column>
 <vxe-table-column field="xSex" title="计量单位"  :edit-render="{name: '$select', options : unitList}"></vxe-table-column>
 <vxe-table-column field="fdescription" title="备注" width="400" show-overflow=false :edit-render="{name: 'textarea'}"></vxe-table-column>
</vxe-table>
        </el-row>

          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button v-if="!isview" type="primary" @click="saveMaterial">保存</el-button>
      <el-button v-if="!isview" @click="$emit('close')">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import xuTest1 from '@/api/customer/xuTest1'
export default {
  name: 'xuTest1ShowAll',
  props: {
    width: { type: String, default: '60vw' },
    xId: { type: Number, },
    isview: false,
    xDescription: { type: String }
  },
  data () {
    const validategroupId = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请选择'))
      } else {
        callback()
      }
    };
    return {
      maPackData : {},
      unitList : [],
      dataList: [],
      title: '新增物料',
      isShowVisible: true,
      activeName: 'base',
      rules: {
        fname: [{ required: true, message: '请填写物料名称', tirgger: 'blur' }],
        fnumber: [{ required: true, message: '请填写物料编码', tirgger: 'blur' }],
        fgroupId: [{ required: true, validator: validategroupId, tirgger: 'change' }],
        ftype: [{ required: true, message: '请填写物料名称', tirgger: 'change' }],
        fbaseunitid: [{ required: true, type: "number", message: '计量单位不能为空！', tirgger: 'change' }],
        fconvertype: [{ required: true, message: '换算类型不能为空！', tirgger: 'change' }]
      },
      materialData: {xId:0},
      materialList: [],
      groupTreeData: [],
      colorData: [],
      warehouseData: [],
      locationData: [],
      wareareaData: [],
      isLoading: true,
      shelfLifeUnitFilter: { fgroupnumber: "004" },
      xuTest1: new xuTest1()
    }
  },
  async created () {
    this.isLoading = true
    let materialData = this.materialData
    
    if (this.xId) { 
      let http = new xuTest1()
        this.title = '编辑测试页'
        materialData = await http.detail({ xId: this.xId })
        this.materialData = materialData.data
    }
    console.log(materialData)
    //  this.getTagtypeList();
    this.getUnitList();
    this.isLoading = false
    
  },
  methods: {
    // getTagtypeList(){
    //     this.xuTest1.queryListPage().then(res => {
    //       let tagtypeList = res.data;
    //       this.tagtypeList = [];
    //       for (var i=0;i < tagtypeList.length;i++) {
    //         this.tagtypeList.push({
    //             value: tagtypeList[i].xId,
    //             label: tagtypeList[i].xName,
    //         })
    //       }
    //     })
    //   },

getUnitList(){
        this.xuTest1.queryListPage().then(res => {
          let unitList = res.data;
          this.unitList = [];
          for (var i=0;i < unitList.length;i++) {
            this.unitList.push({
                value: unitList[i].xId,
                label: unitList[i].xName,
            })
          }
        })
      },

    onWarehouseChange (row) {
      //先设置默认值，仓库改变时，设置自身值但不触发值改变事件
      let isClean = this.$tie.isEmpty(row);
      this.materialData.fwarehousename = null
      this.materialData.fwareareaname = null
      this.materialData.flocationname = null
      this.$refs.warehouse.defaultSelect({ fid: null, fname: null, isChange: "0" })
      this.$refs.warearea.defaultSelect({ fid: null, fname: null, isChange: "0" })
      this.$refs.location.defaultSelect({ fid: null, fname: null, isChange: "0" })
      if (!isClean) {
        //有值时设置自身默认值，设置库区过滤条件
        this.materialData.fwarehousename = row.fname
        this.$refs.warehouse.defaultSelect({ fid: row.fid, fname: row.fname, isChange: "0" })
        this.$refs.warearea.refresh([{ field: 'fwarehouseid', value: row.fid }])
        this.$refs.location.refresh([{ field: null, value: null }])
      } else {
        //没值时就是清空，清空设置自身为空，库区为空，库位为空，库区和库位的过滤条件为空
        this.materialData.fwarehousename = null
        this.materialData.fwareareaname = null
        this.materialData.flocationname = null
        this.$refs.warehouse.defaultSelect({ fid: null, fname: null, isChange: "0" })
        this.$refs.warearea.defaultSelect({ fid: null, fname: null, isChange: "0" })
        this.$refs.location.defaultSelect({ fid: null, fname: null, isChange: "0" })

        this.$refs.warearea.refresh([{ field: null, value: null }])
        this.$refs.location.refresh([{ field: null, value: null }])
      }
    },
    onWareareaChange (row) {
      //先设置默认值，库区改变时设置自身值但不触发值改变事件，设置仓库值但不触发值改变事件
      let isClean = this.$tie.isEmpty(row);
      // this.materialData.fwarehousename = null
      this.materialData.fwareareaname = null
      this.materialData.flocationname = null
      // this.$refs.warehouse.defaultSelect({fid:null,fname:null,isChange:"0"})
      this.$refs.warearea.defaultSelect({ fid: null, fname: null, isChange: "0" })
      this.$refs.location.defaultSelect({ fid: null, fname: null, isChange: "0" })
      if (!isClean) {
        //有值时设置仓库、自身默认值，设置库区过滤条件
        this.materialData.fwarehousename = row.fwarehousename
        this.materialData.fwareareaname = row.fname
        this.$refs.warehouse.defaultSelect({ fid: row.fwarehouseid, fname: row.fwarehousename, isChange: "0" })
        this.$refs.warearea.defaultSelect({ fid: row.fid, fname: row.fname, isChange: "0" })
        this.$refs.warehouse.refresh([{ field: null, value: null }])
        this.$refs.warearea.refresh([{ field: 'fwarehouseid', value: row.fwarehouseid }])
        this.$refs.location.refresh([{ field: 'fwareareaid', value: row.fid }])
      } else {
        //没值时就是清空，清空设置自身值为空，库位为空，库位的过滤条件为空
        this.materialData.fwareareaname = null
        this.materialData.flocationname = null
        this.$refs.warearea.defaultSelect({ fid: null, fname: null, isChange: "0" })
        this.$refs.location.defaultSelect({ fid: null, fname: null, isChange: "0" })

        this.$refs.location.refresh([{ field: null, value: null }])
      }
    },
    onLocationChange (row) {
      //先设置默认值，库位改变时设置自身值、库区值、仓库值
      let isClean = this.$tie.isEmpty(row);
      // this.materialData.fwarehousename = null
      // this.materialData.fwareareaname = null
      this.materialData.flocationname = null
      // this.$refs.warehouse.defaultSelect({fid:null,fname:null,isChange:"0"})
      // this.$refs.warearea.defaultSelect({fid:null,fname:null,isChange:"0"})
      this.$refs.location.defaultSelect({ fid: null, fname: null, isChange: "0" })
      if (!isClean) {
        //有值时设置仓库、库区、自身默认值，不触发值更新事件，设置仓库、库区、库位过滤条件
        this.materialData.fwarehousename = row.fwarehousename
        this.materialData.fwareareaname = row.fwareareaname
        this.materialData.flocationname = row.fname
        this.$refs.warehouse.defaultSelect({ fid: row.fwarehouseid, fname: row.fwarehousename, isChange: "0" })
        this.$refs.warearea.defaultSelect({ fid: row.fwareareaid, fname: row.fwareareaname, isChange: "0" })
        this.$refs.location.defaultSelect({ fid: row.fid, fname: row.fname, isChange: "0" })
        this.$refs.warehouse.refresh([{ field: null, value: null }])
        this.$refs.warearea.refresh([{ field: 'fwarehouseid', value: row.fwarehouseid }])
        this.$refs.location.refresh([{ field: 'fwareareaid', value: row.fwareareaid }])
      } else {
        //没值时就是清空，清空自身值为空，库区为空，仓库为空，自身、库区、仓库的过滤条件为空
        // this.materialData.fwarehousename = null
        // this.materialData.fwareareaname = null
        this.materialData.flocationname = null
        // this.$refs.warehouse.defaultSelect({fid:null,fname:null,isChange:"0"})
        // this.$refs.warearea.defaultSelect({fid:null,fname:null,isChange:"0"})
        this.$refs.location.defaultSelect({ fid: null, fname: null, isChange: "0" })
        // this.$refs.warehouse.refresh([{field:null,value:null}])
        // this.$refs.warearea.refresh([{field:null,value:null}])
        // this.$refs.location.refresh([{field:null,value:null}])
      }
    },
    fconvertypeChange (name, value) {
      if (value == 'FLOATED') {
        this.materialData.fdirection = 'NONE'
        this.$refs.fdirection.changeVal('NONE');
        this.$refs.fdirection.isDisabled(true);
      } else {
        this.$refs.fdirection.isDisabled(false);
      }
    },
    fisuseShelfLifeChanged () {
      if (this.materialData.fisuseShelfLife == 0) {
        this.materialData.fshelfLife = null
        this.materialData.fshelfLifeUnitid = null
      }
    },
    fisuseAuxPropertyChanged () {
      if (this.materialData.fisuseAuxProperty == 0) {
        this.materialData.fauxProperty = ''
      }
    },
    saveMaterial () {
      this.$refs['materialData'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '请耐心等待.....',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          let http = new xuTest1()
          //若有xid证明是编辑没有则是新增
          
          if (this.xId) {
            http.update(this.materialData).then(res => {
              loading.close()
              this.$tie.showSuccess(res.message)
             
              this.close(true)
            }).catch(e => {
              loading.close()
            })
          } else {
            http.add(this.materialData).then(res => {
              loading.close()
              this.$tie.showSuccess(res.message)
              this.$emit('close')
              this.close(true)
            }).catch(e => {
              loading.close()
            })
          }
        } 
      })
    }, 
    close(isOk){
        this.$emit('close',isOk)
      },
    calculationVolume () {
      let length = this.materialData.flength == null ? 0 : this.materialData.flength;
      let width = this.materialData.fwidth == null ? 0 : this.materialData.fwidth;
      let height = this.materialData.fheight == null ? 0 : this.materialData.fheight;
      this.materialData.fvolume = (length * width * height).toFixed(4);
    },
    unitChange (unit) {
      if (unit != null) {
        this.materialData.fbaseunitname = unit.fname
      }
      this.materialData.fsnunitid = null
    },
    auxUnitChange (unit) {
      if (unit != null) {
        this.materialData.fauxunitname = unit.fname
      }
      this.materialData.fsnunitid = null
    },
    usesnChange () {
      if (!this.materialData.fusesn) {
        this.materialData.fsnunitid = null
      }
    }

  },
}
</script>

<style >
.fullWidth {
  width: 100%;
}
</style>

